import './details.scss'
import Bids from '../../components/bids/Bids'

function Details() {
    const post = JSON.parse(localStorage.getItem('post')) || null
    console.log(post)
    
  return (
    <div className='details'>
        <div className='container'>
            <div className='detailItem'>
                <span className='bwicId'>{'#' + post.bwicId}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">Cusip: </span>
                <span className='cusip'>{post.cusip}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">Due Date: </span>
                <span className='dueDate'>{post.dueDate}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">Position: </span>
                <span className='position'>{post.position}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">Market Price($): </span>
                <span className='price'>{post.price}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">Starting Market Value($): </span>
                <span className='marketValue'>{post.marketValue}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">NO. of Bids: </span>
                <span className='totalBids'>{post.totalBids}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">My Ranking: </span>
                <span className='bidRank'>{post.bidRank? post.bidRank : '-'}</span>
            </div>
            <div className='detailItem'>
                <span className="itemTitle">My Bid Market Value($): </span>
                <span className='bidMarketValue'>{post.bidMarketValue? post.bidMarketValue : '-'}</span>
            </div>
            
            <span className='action'>
            
            {post.overDue? 
                post.winner? 
                <span className='winner'>
                    <Bids 
                    buttonText={'Winner: ' + post.winner}
                    bwicId={post.bwicId}
                    />
                </span>
                : 
                <span className='noWinner'>
                    <Bids 
                    buttonText='No Winner' 
                    bwicId={post.bwicId}
                    />
                </span>
                : 
                <span className='viewBids hvr-fade' htmlFor="view"> 
                <Bids 
                    buttonText='view Bids' 
                    bwicId={post.bwicId}
                />
                </span>
            }
            </span>
        </div>
    </div>
  )
}

export default Details